<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi K30、Redmi Note 8 Pro，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
    <meta name="keywords" content="小米,redmi,小米10,Redmi K30,小米MIX Alpha,小米商城">
    <title>小米商城 - 小米10 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
    <link rel="shortcut icon" href="https://s01.mifile.cn/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/topbar.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/main-content.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet"
          href="../../../Documents/Tencent Files/704322723/FileRecv/牧云游项目组件开发 (1)/牧云游项目组件开发/mall/src/pages/index/index.css">

</head>

<body>
    <!--topbar start-->
    <div id="topbar">
        <div class="container">
            <div class="topbar-navlist fl">
                <ul class="clearfix">
                    <li>
                        <a href="#">小米商城</a>
                    </li>
                    <li>
                        <a href="#">MIUI</a>
                    </li>
                    <li>
                        <a href="#">IoT</a>
                    </li>
                    <li>
                        <a href="#">云服务</a>
                    </li>
                    <li>
                        <a href="#">金融</a>
                    </li>
                    <li>
                        <a href="#">有品</a>
                    </li>
                    <li>
                        <a href="#">小爱开放平台</a>
                    </li>
                    <li>
                        <a href="#">企业团购 </a>
                    </li>
                    <li>
                        <a href="#"> 资质证照</a>
                    </li>
                    <li>
                        <a href="#">协议规则</a>
                    </li>
                    <li class="pos-r top-triangle">
                        <a href="#">下载app</a>
                        <div class="download pos-a">
                            <img src="images/header/download.png" alt="">
                            小米商城app
                        </div>
                    </li>
                    <li>
                        <a href="#">Select Location</a>
                    </li>
                </ul>
            </div>

            <div class="topbar-user fr">
                <ul class="clearfix">
                    <li class="pos-r">
                        <a href="#">登录</a>
                    </li>
                    <li class="pos-r">
                        <a href="#">注册</a>
                    </li>
                    <li><a href="#">消息通知</a>
                    </li>
                    <li class="shop pos-r">
                        <a href="#">
                            <i class="iconfont icon-shop-cart-l"></i>
                            购物车 (0)
                        </a>
                        <div class="shop-pull pos-a">购物车还没有任何商品,赶紧选购吧!</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--topbar end-->


    <!--header start-->
    <header>
        <div class="container clearfix">
            <!--logo start-->
            <h1 class="logo fl">
                <a href="#">小米商城</a>
            </h1>
            <!--logo end-->

            <!--header-list start-->
            <div class="header-list fl">
                <ul class="clearfix">
                    <li>
                        <a href="#">小米手机</a>
                        <div class="header-listpull pos-a">
                            <div class="container">
                                <ul class="clearfix">
                                    <li class="pos-r">
                                        <a href="#">
                                            <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                        </a>
                                        <div class="menu-introduce">
                                            <p class="menu-title">小米10pro</p>
                                            <p class="menu-price">4999元起</p>
                                        </div>
                                    </li>
                                    <li class="pos-r">
                                        <a href="#">
                                            <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                        </a>
                                        <div class="menu-introduce">
                                            <p class="menu-title">小米10pro</p>
                                            <p class="menu-price">4999元起</p>
                                        </div>
                                    </li>
                                    <li class="pos-r">
                                        <a href="#">
                                            <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                        </a>
                                        <div class="menu-introduce">
                                            <p class="menu-title">小米10pro</p>
                                            <p class="menu-price">4999元起</p>
                                        </div>
                                    </li>
                                    <li class="pos-r">
                                        <a href="#">
                                            <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                        </a>
                                        <div class="menu-introduce">
                                            <p class="menu-title">小米10pro</p>
                                            <p class="menu-price">4999元起</p>
                                        </div>
                                    </li>
                                    <li class="pos-r">
                                        <a href="#">
                                            <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                        </a>
                                        <div class="menu-introduce">
                                            <p class="menu-title">小米10pro</p>
                                            <p class="menu-price">4999元起</p>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                        </a>
                                        <div class="menu-introduce">
                                            <p class="menu-title">小米10pro</p>
                                            <p class="menu-price">4999元起</p>
                                        </div>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">Redmi 红米</a>
                    </li>
                    <li>
                        <a href="#">电视</a>
                    </li>
                    <li>
                        <a href="#">笔记本</a>
                    </li>
                    <li>
                        <a href="#">家电</a>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                    </li>
                    <li>
                        <a href="#">智能硬件</a>
                    </li>
                    <li>
                        <a href="#">服务</a>
                    </li>
                    <li>
                        <a href="#">社区</a>
                    </li>
                </ul>
            </div>
            <!--header-list end-->

            <!--header search-start-->
            <div class="header-search fr pos-r">
                <form action="#" class="clearfix">
                    <input type="text" class="fl">
                    <input type="submit" id="submit" class="fr" value="">
                    <label for="submit" class="iconfont icon-fangdajing pos-a"></label>
                    <div class="search-tips pos-a">
                        <a href="#">小米10</a>
                        <a href="#">redmi k30 pro</a>
                    </div>

                    <!--search-list start-->
                    <div class="search-list pos-a">
                        <ul>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                            <li>
                                <a href="#">小米10</a>
                            </li>
                        </ul>
                    </div>
                    <!--search-list start-->
                </form>
            </div>
            <!--header-search end-->
        </div>
    </header>
    <!--header end-->


    <!--banner start-->
    <div id="banner">
        <div class="container pos-r">
            <input type="radio" name="banner-radio" id="banner-radio1" checked>
            <input type="radio" name="banner-radio" id="banner-radio2">
            <input type="radio" name="banner-radio" id="banner-radio3">
            <input type="radio" name="banner-radio" id="banner-radio4">
            <input type="radio" name="banner-radio" id="banner-radio5">

            <div class="banner-img">
                <img src="images/head-banner/banner/banner1.webp" alt="">
                <img src="images/head-banner/banner/banner2.webp" alt="">
                <img src="images/head-banner/banner/banner3.webp" alt="">
                <img src="images/head-banner/banner/banner4.webp" alt="">
                <img src="images/head-banner/banner/banner5.jpg" alt="">
            </div>

            <!--banner-btn start-->
            <div class="banner-btn">
                <label for="banner-radio1"></label>
                <label for="banner-radio2"></label>
                <label for="banner-radio3"></label>
                <label for="banner-radio4"></label>
                <label for="banner-radio5"></label>
            </div>
            <!--banner-btn end-->

            <!--menu菜单 start-->
            <ul id="menu">
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                        <div class="sub-menu">
                            <div class="sub-child">
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                            </div>
                            <div class="sub-child">
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                            </div>
                            <div class="sub-child">
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                            </div>
                            <div class="sub-child">
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>
                                <a href="#" class="sub-child-list">
                                    <img src="images/head-nav/phone/headnav-phone1.png" alt="">
                                    <span>小米10青春版</span>
                                </a>

                            </div>
                        </div>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>

                </li>
                <li>
                    <p>
                        <a href="#">手机</a>
                        <a href="#">电话卡</a>
                        <i class="iconfont icon-arrow-right"></i>
                    </p>
                </li>
            </ul>
            <!--menu菜单 end-->

            <!--arrow start-->
            <div class="arrow">
                <div class="left-arrow">
                    <i class="iconfont icon-left"></i>
                </div>
                <div class="right-arrow">
                    <i class="iconfont icon-arrow-right"></i>
                </div>
            </div>
            <!--arrow end-->
        </div>
    </div>
    <!--banner end-->

    <!--product-list banner下面商品分类 start-->
    <div id="product-list">
        <div class="container">
            <!--左边 start-->
            <ul class="left-menu">
                <li>
                    <img src="images/head-banner/banner-item/time.png" alt="">
                    <p>小米秒杀</p>
                </li>
                <li>
                    <img src="images/head-banner/banner-item/time.png" alt="">
                    <p>小米秒杀</p>
                </li>
                <li>
                    <img src="images/head-banner/banner-item/time.png" alt="">
                    <p>小米秒杀</p>
                </li>
                <li>
                    <img src="images/head-banner/banner-item/time.png" alt="">
                    <p>小米秒杀</p>
                </li>
                <li>
                    <img src="images/head-banner/banner-item/time.png" alt="">
                    <p>小米秒杀</p>
                </li>
                <li>
                    <img src="images/head-banner/banner-item/time.png" alt="">
                    <p>小米秒杀</p>
                </li>
            </ul>
            <!--左边 end-->

            <!--右边 start-->
            <div class="right-menu">
                <div class="pic">
                    <img src="images/head-bottom/bottom1.jpg" alt="">
                </div>
                <div class="pic">
                    <img src="images/head-bottom/bottom1.jpg" alt="">
                </div>
                <div class="pic">
                    <img src="images/head-bottom/bottom1.jpg" alt="">
                </div>
            </div>

            <!--右边 end-->
        </div>
    </div>
    <!--product-list end-->

    <!--main-content start-->
    <main id="main-content">
        <div class="container">
            <!--小米闪购 start-->
            <section>
                <div class="top-title clearfix">
                    <h3 class="fl">小米闪购</h3>
                    <div class="top-arrow fr">
                        <span class="iconfont icon-left"></span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>

                <!--小米闪购主体内容 start-->
                <div class="quick-shop">
                    <ul class="shop-list">
                        <li>
                            <p>20:00场</p>
                            <img src="images/head-bottom/shandian" alt="">
                            <p class="time">距离结束还有</p>
                            <div class="countdown">
                                <span class="fl">:</span>
                                <div class="clock fl">08</div>
                                <span class="fl">:</span>
                            </div>
                        </li>
                        <li class="slide-img">
                            <a href="#">
                                <img src="images/head-banner/banner-item/tissue.jpg" alt="">
                                <h3>MIJOY 抽纸青春版 24包/箱</h3>
                                <p class="desc">精选原生竹浆，健康环保</p>
                                <p class="price">27.9 <span>32.9元</span></p>
                            </a>
                        </li>
                        <li class="slide-img">
                            <a href="#">
                                <img src="images/head-banner/banner-item/tissue.jpg" alt="">
                                <h3>MIJOY 抽纸青春版 24包/箱</h3>
                                <p class="desc">精选原生竹浆，健康环保</p>
                                <p class="price">27.9 <span>32.9元</span></p>
                            </a>
                        </li>
                        <li class="slide-img">
                            <a href="#">
                                <img src="images/head-banner/banner-item/tissue.jpg" alt="">
                                <h3>MIJOY 抽纸青春版 24包/箱</h3>
                                <p class="desc">精选原生竹浆，健康环保</p>
                                <p class="price">27.9 <span>32.9元</span></p>
                            </a>
                        </li>
                        <li class="slide-img">
                            <a href="#">
                                <img src="images/head-banner/banner-item/tissue.jpg" alt="">
                                <h3>MIJOY 抽纸青春版 24包/箱</h3>
                                <p class="desc">精选原生竹浆，健康环保</p>
                                <p class="price">27.9 <span>32.9元</span></p>
                            </a>
                        </li>
                </div>
            </section>
            <!--小米闪购主体内容 end-->

            <!--下方图片介绍-->
            <div class="introduce-img">
                <img src="images/bigimg/bannerlong1.webp" alt="">
            </div>

            <!--手机部分 start-->
            <section>
                <div class="top-title clearfix">
                    <h3 class="fl">小米闪购</h3>
                    <div class="phone-title fr">
                        <span>查看全部</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>

                <div class="mobile-phone clearfix">
                    <div class="big-img fl">
                        <img src="images/bigimg/longleft.webp" alt="">
                    </div>

                    <div class="phone-list">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="introduce-img">
                    <img src="images/bigimg/bannerlong1.webp" alt="">
                </div>
            </section>


            <section>
                <div class="top-title clearfix">
                    <h3 class="fl">小米闪购</h3>
                    <div class="phone-title fr">
                        <span>查看全部</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>

                <div class="mobile-phone clearfix">
                    <div class="big-img fl">
                        <img src="images/bigimg/longleft.webp" alt="">
                    </div>

                    <div class="phone-list">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="introduce-img">
                    <img src="images/bigimg/bannerlong1.webp" alt="">
                </div>
            </section>


            <section>
                <div class="top-title clearfix">
                    <h3 class="fl">小米闪购</h3>
                    <div class="phone-title fr">
                        <span>查看全部</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>

                <div class="mobile-phone clearfix">
                    <div class="big-img fl">
                        <img src="images/bigimg/longleft.webp" alt="">
                    </div>

                    <div class="phone-list">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/head-banner/banner-item/phone.webp" alt="">
                                    <h3>小米10</h3>
                                    <p class="desc">骁龙865/1亿像素相机</p>
                                    <p class="price">3999元</p>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="introduce-img">
                    <img src="images/bigimg/bannerlong1.webp" alt="">
                </div>
            </section>
            <!--手机部分 end-->


            <!--video start-->
            <section>
                <div class="top-title clearfix">
                    <h3 class="fl">视频</h3>
                    <div class="phone-title fr">
                        <span>查看全部</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>

                <div class="video">
                    <ul class="video-list">
                        <li>
                            <a href="#" class="video-content">
                                <img src="images/content/content-video/vodeo1.webp" alt="">
                                <span class="play"></span>
                                <h3>小米10 青春版发布会</h3>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="video-content">
                                <img src="images/content/content-video/vodeo1.webp" alt="">
                                <span class="play"></span>
                                <h3>小米10 青春版发布会</h3>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="video-content">
                                <img src="images/content/content-video/vodeo1.webp" alt="">
                                <span class="play"></span>
                                <h3>小米10 青春版发布会</h3>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="video-content">
                                <img src="images/content/content-video/vodeo1.webp" alt="">
                                <span class="play"></span>
                                <h3>小米10 青春版发布会</h3>
                            </a>
                        </li>
                    </ul>
                </div>


            </section>
            <!--video end-->
        </div>
    </main>

    <!--main-content end-->


    <footer>
        <div class="container">

            <!--维修服务 start-->
            <div class="footer-service">
                <ul class="list-service clearfix">
                    <li>
                        <a href="#">
                            <i class="iconfont icon-liwu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-liwu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-liwu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-liwu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-liwu"></i>
                            预约维修服务
                        </a>
                    </li>
                </ul>
            </div>
            <!--维修服务 end-->

            <!--细分服务 start-->
            <div class="footer-links clearfix">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账号管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账号管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账号管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账号管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账号管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账号管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                    <dd>联系我们</dd>
                </dl>

                <div class="col-contact">
                    <p class="phone">400-100-5678</p>
                    <p class="time">8:00-18:00（仅收市话费)</p>
                    <a href="#" class="btn">
                        <i class="iconfont icon-xiaoxi"></i>
                        人工客服
                    </a>
                    <p class="follows">
                        关注小米
                        <a href=""><img src="images/content/wb.png" alt=""></a>
                        <a href=""><img src="images/content/wb.png" alt=""></a>    
                    </p>
                </div>
            </div>

            <!--细分服务 end-->
        </div>
    </footer>


    <div id="site-info">
        <div class="container">
            <div class="site-logo"></div>
        </div>

        <div class="info-text">
            <p>
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">小米商城</a>
                <span>|</span>  
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">小米商城</a>
                <span>|</span>
            </p>
            <p>
                © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12  食品经营许可证<br>
                违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
            <p>
                <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
            </p>

            <div class="slogan">
            </div>
        </div>
    </div>


    <!--侧边栏 start-->
    <div class="navigation-bar">
        <a href="" class="fixed-navigation">
            <div class="navigation">
                <span class="iconfont icon-shop-cart-l "></span>
                <p>手机APP</p>
            </div>
        </a> 
        <a href="" class="fixed-navigation">
            <div class="navigation">
                <span class="iconfont icon-shop-cart-l "></span>
                <p>手机APP</p>
            </div>
        </a> 
        <a href="" class="fixed-navigation">
            <div class="navigation">
                <span class="iconfont icon-shop-cart-l "></span>
                <p>手机APP</p>
            </div>
        </a> 
        <a href="" class="fixed-navigation">
            <div class="navigation">
                <span class="iconfont icon-shop-cart-l "></span>
                <p>手机APP</p>
            </div>
        </a> 
        <a href="" class="fixed-navigation">
            <div class="navigation">
                <span class="iconfont icon-shop-cart-l "></span>
                <p>手机APP</p>
            </div>
        </a> 
        <a href="#topbar" class="fixed-navigation  navigation-top">
            <div class="navigation">
                <span class="iconfont icon-shop-cart-l "></span>
                <p>回到顶部</p>
            </div>
        </a> 
    </div> 

    <!--侧边栏 end-->
</body>

</html>